import React, { PureComponent } from 'react';
import { Table,Divider,Avatar} from 'antd';
import styles from './index.less';

class AdminTable extends PureComponent {
  state = {

  };

  componentWillReceiveProps(nextProps) {
    // clean state
    // if (nextProps.selectedRows.length === 0) {
    //   this.setState({
    //
    //   });
    // }
  }

  handleTableChange = (pagination, filters, sorter) => {
    this.props.onChange(pagination, filters, sorter);
  }

  changePassword(record) {
    this.props.changeKey(record);
  }

  editData(record) {
    this.props.editdata(record);
  }

  delAccount(record) {
    this.props.delectAccount(record);
  }

  render() {
    const { data: { list, pagination }, loading,pageNo ,pageSize,total } = this.props;
    const statusList = ['冻结','正常'];
    const columns = [
      {
        title: '名称',
        dataIndex: 'nickname',
        render:(text, record, index) => (
          <div>
              {/*<Avatar style={{ verticalAlign: 'middle' }} src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"  />*/}
              <span style={{ marginLeft: 6, verticalAlign: 'middle' }} >
                  {text}
              </span>
          </div>
        )
      },
      {
        title: '账号',
        dataIndex: 'account',
      },
      {
        title: '状态',
        dataIndex: 'status',
        render(val) {
          return <span>{statusList[val]}</span>;
        },
      },
      {
        title: '角色',
        dataIndex: 'roleName',
      },
      {
        title: '操作',
        render: (text,record,index) => (
            <div>
              <a onClick={()=>this.changePassword(record)} >修改密码</a>
              <Divider type="vertical" />
              {record.roleName != "电台管理员"
                ? <a onClick={()=>this.editData(record)}>编辑</a>
                : <a disabled="true" >编辑</a>}
              <Divider type="vertical" />
              {record.roleName != "电台管理员"
                ? <a onClick={()=>this.delAccount(record)}>删除</a>
                : <a disabled="true" >删除</a>}
            </div>
        ),
      },
    ];

    const paginationProps = {
      pageSize:pageSize,
      total:total,
      current:pageNo,
      onChange:this.handleTableChange
    };


    return (
      <div className={styles.adminTable}>
        <Table
          loading={loading}
          rowKey={record => record.id}
          dataSource={list}
          columns={columns}
          pagination={paginationProps}
        />
      </div>
    );
  }
}

export default AdminTable;
